<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>day04-享+本地生活 | 一切只为就业</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/renzi_89/favicon.ico">
    <link rel="apple-touch-icon" href="/renzi_89/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/renzi_89/assets/css/0.styles.2bce678d.css" as="style"><link rel="preload" href="/renzi_89/assets/js/app.a378f438.js" as="script"><link rel="preload" href="/renzi_89/assets/js/3.2ef7cd9f.js" as="script"><link rel="preload" href="/renzi_89/assets/js/40.e28bfea0.js" as="script"><link rel="prefetch" href="/renzi_89/assets/js/10.537dba2f.js"><link rel="prefetch" href="/renzi_89/assets/js/11.777d59f7.js"><link rel="prefetch" href="/renzi_89/assets/js/12.3aa27d8a.js"><link rel="prefetch" href="/renzi_89/assets/js/13.174d629f.js"><link rel="prefetch" href="/renzi_89/assets/js/14.359eface.js"><link rel="prefetch" href="/renzi_89/assets/js/15.28c41def.js"><link rel="prefetch" href="/renzi_89/assets/js/16.fb785696.js"><link rel="prefetch" href="/renzi_89/assets/js/17.cb0a36ba.js"><link rel="prefetch" href="/renzi_89/assets/js/18.9c5df806.js"><link rel="prefetch" href="/renzi_89/assets/js/19.2b9d3dfc.js"><link rel="prefetch" href="/renzi_89/assets/js/2.af70fa7a.js"><link rel="prefetch" href="/renzi_89/assets/js/20.a6b56611.js"><link rel="prefetch" href="/renzi_89/assets/js/21.a1c53edf.js"><link rel="prefetch" href="/renzi_89/assets/js/22.8f1dfff9.js"><link rel="prefetch" href="/renzi_89/assets/js/23.517f9b15.js"><link rel="prefetch" href="/renzi_89/assets/js/24.51725349.js"><link rel="prefetch" href="/renzi_89/assets/js/25.a8466485.js"><link rel="prefetch" href="/renzi_89/assets/js/26.a63a128f.js"><link rel="prefetch" href="/renzi_89/assets/js/27.f9af77ae.js"><link rel="prefetch" href="/renzi_89/assets/js/28.a116071d.js"><link rel="prefetch" href="/renzi_89/assets/js/29.6e2ab161.js"><link rel="prefetch" href="/renzi_89/assets/js/30.8ed301ad.js"><link rel="prefetch" href="/renzi_89/assets/js/31.c8ccc7e7.js"><link rel="prefetch" href="/renzi_89/assets/js/32.50f06c6d.js"><link rel="prefetch" href="/renzi_89/assets/js/33.1da2c11d.js"><link rel="prefetch" href="/renzi_89/assets/js/34.5f05cbec.js"><link rel="prefetch" href="/renzi_89/assets/js/35.ca54b9a0.js"><link rel="prefetch" href="/renzi_89/assets/js/36.c4af064d.js"><link rel="prefetch" href="/renzi_89/assets/js/37.64f512c3.js"><link rel="prefetch" href="/renzi_89/assets/js/38.13face63.js"><link rel="prefetch" href="/renzi_89/assets/js/39.0fe48580.js"><link rel="prefetch" href="/renzi_89/assets/js/4.7ac18f02.js"><link rel="prefetch" href="/renzi_89/assets/js/41.cd995098.js"><link rel="prefetch" href="/renzi_89/assets/js/42.10e9c69f.js"><link rel="prefetch" href="/renzi_89/assets/js/43.51ae3f08.js"><link rel="prefetch" href="/renzi_89/assets/js/44.aae27af0.js"><link rel="prefetch" href="/renzi_89/assets/js/45.e5aaa360.js"><link rel="prefetch" href="/renzi_89/assets/js/46.9931d201.js"><link rel="prefetch" href="/renzi_89/assets/js/5.599b9c30.js"><link rel="prefetch" href="/renzi_89/assets/js/6.68c51d9b.js"><link rel="prefetch" href="/renzi_89/assets/js/7.32283c1c.js"><link rel="prefetch" href="/renzi_89/assets/js/8.f2ca5c2a.js"><link rel="prefetch" href="/renzi_89/assets/js/9.b17a1374.js">
    <link rel="stylesheet" href="/renzi_89/assets/css/0.styles.2bce678d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/renzi_89/" class="home-link router-link-active"><img src="/renzi_89/doraameng.jpg" alt="一切只为就业" class="logo"> <span class="site-name can-hide">一切只为就业</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/renzi_89/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/renzi_89/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/renzi_89/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><a href="/renzi_89/vue3ts/" class="nav-link">
  Vue3+TS
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_89" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr-t.itheima.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-admin-template/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我们项目使用的模板网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios私人网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue3周边网站" class="dropdown-title"><span class="title">vue3周边网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue3周边网站" class="mobile-dropdown-title"><span class="title">vue3周边网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue 3官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://cn.vitejs.dev/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vite 脚手架官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router 4.x 路由
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex 4.x状态管理
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://pinia.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  pinia 新状态管理
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element-plus.org/zh-CN/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element Plus UI库
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vant-contrib.gitee.io/vant/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant 4 H5 UI库
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.typescriptlang.org/zh/play" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TS演练场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ts.xcatliu.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TS自学网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/renzi_89/interview/" class="nav-link">
  Vue3面试题
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/renzi_89/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/renzi_89/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/renzi_89/xcx/" class="nav-link router-link-active">
  小程序
</a></div><div class="nav-item"><a href="/renzi_89/vue3ts/" class="nav-link">
  Vue3+TS
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_89" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr-t.itheima.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-admin-template/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我们项目使用的模板网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios私人网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue3周边网站" class="dropdown-title"><span class="title">vue3周边网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue3周边网站" class="mobile-dropdown-title"><span class="title">vue3周边网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue 3官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://cn.vitejs.dev/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vite 脚手架官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router 4.x 路由
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex 4.x状态管理
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://pinia.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  pinia 新状态管理
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://element-plus.org/zh-CN/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element Plus UI库
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://vant-contrib.gitee.io/vant/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant 4 H5 UI库
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.typescriptlang.org/zh/play" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TS演练场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ts.xcatliu.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  TS自学网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/renzi_89/interview/" class="nav-link">
  Vue3面试题
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/01" class="sidebar-heading clickable"><span>1-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/02" class="sidebar-heading clickable"><span>2-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/03" class="sidebar-heading clickable"><span>3-小程序基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/04" class="sidebar-heading clickable open active"><span>4-享+本地生活</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/renzi_89/xcx/04.html" aria-current="page" class="active sidebar-link">day04-享+本地生活</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_01-享-小程序" class="sidebar-link">01.享+小程序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#项目介绍" class="sidebar-link">项目介绍</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#接口文档" class="sidebar-link">接口文档</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#扫码体验" class="sidebar-link">扫码体验</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_02-拉取远程仓库代码" class="sidebar-link">02.拉取远程仓库代码</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#趣味提问" class="sidebar-link">趣味提问</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#拉取代码" class="sidebar-link">拉取代码</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#小结" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_03-启动项目" class="sidebar-link">03.启动项目</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-2" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#思考" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#用vscode写代码" class="sidebar-link">用vscode写代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_04-基础封装-消息提示" class="sidebar-link">04.基础封装—消息提示</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-3" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#思考-2" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#消息提示封装" class="sidebar-link">消息提示封装</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#使用" class="sidebar-link">使用</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#小结-2" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_05-基础封装-全局加载" class="sidebar-link">05.基础封装—全局加载</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-4" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#思考-3" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#全局加载" class="sidebar-link">全局加载</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#小结-3" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_06-git操作" class="sidebar-link">06.git操作</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-5" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#git新建分支并提交" class="sidebar-link">git新建分支并提交</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#小结-4" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_07-网络请求-wx-https" class="sidebar-link">07.网络请求—wx-https</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-6" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#wx-https" class="sidebar-link">wx-https</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#小结-5" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_08-网络请求-全局挂载-http" class="sidebar-link">08.网络请求—全局挂载$http</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-7" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤-2" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#小结-6" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_09-网络请求-配置基地址及响应拦截器" class="sidebar-link">09.网络请求—配置基地址及响应拦截器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-8" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#代码参考" class="sidebar-link">代码参考</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_10-公告管理-公告列表" class="sidebar-link">10.公告管理—公告列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-9" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤-3" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_11-公告管理-公告详情" class="sidebar-link">11.公告管理—公告详情</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-10" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤-4" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码-2" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_12-用户管理-登录检测" class="sidebar-link">12.用户管理—登录检测</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-11" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#思考-4" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#检测方法" class="sidebar-link">检测方法</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#将token放到app上" class="sidebar-link">将token放到app上</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#小结-7" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_13-用户管理-统一登录检测" class="sidebar-link">13.用户管理—统一登录检测</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-12" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#思考-5" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#统一登录检测" class="sidebar-link">统一登录检测</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#小结-8" class="sidebar-link">小结</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_14-登录检测-组件封装" class="sidebar-link">14.登录检测-组件封装</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-13" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤-5" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码-3" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_15-登录检测-未登录跳转到登录页" class="sidebar-link">15.登录检测—未登录跳转到登录页</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-14" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码-4" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_16-登录检测-记录返回地址" class="sidebar-link">16.登录检测—记录返回地址</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-15" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#思考-6" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤-6" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码-5" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_17-登录-倒计时" class="sidebar-link">17.登录—倒计时</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-16" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#思考-7" class="sidebar-link">思考</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#van-field" class="sidebar-link">van-field</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#van-count-down" class="sidebar-link">van-count-down</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_18-登录-获取验证码" class="sidebar-link">18.登录—获取验证码</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-17" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤-7" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码-6" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_19-登录-复制验证码到剪切板" class="sidebar-link">19.登录—复制验证码到剪切板</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-18" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#setclipboarddata" class="sidebar-link">setClipboardData</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#getclipboarddata" class="sidebar-link">getClipboardData</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码-7" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_20-登录-发送登录请求" class="sidebar-link">20.登录—发送登录请求</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-19" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤-8" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码-8" class="sidebar-link">参考代码</a></li></ul></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#_21-登录成功-重定向回访问页面" class="sidebar-link">21.登录成功—重定向回访问页面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#目标-20" class="sidebar-link">目标</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#重定向回访问页" class="sidebar-link">重定向回访问页</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#核心步骤-9" class="sidebar-link">核心步骤</a></li><li class="sidebar-sub-header"><a href="/renzi_89/xcx/04.html#参考代码-9" class="sidebar-link">参考代码</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/05" class="sidebar-heading clickable"><span>5-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/06" class="sidebar-heading clickable"><span>6-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/07" class="sidebar-heading clickable"><span>7-享+本地生活</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/08" class="sidebar-heading clickable"><span>8-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/09" class="sidebar-heading clickable"><span>9-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/renzi_89/xcx/10" class="sidebar-heading clickable"><span>10-uni-app项目</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="day04-享-本地生活"><a href="#day04-享-本地生活" class="header-anchor">#</a> day04-享+本地生活</h1> <h2 id="_01-享-小程序"><a href="#_01-享-小程序" class="header-anchor">#</a> 01.享+小程序</h2> <h3 id="项目介绍"><a href="#项目介绍" class="header-anchor">#</a> 项目介绍</h3> <p>享+社区是一个生活类的小程序项目，主要服务于小区业主，为其提供生活家电报修、访客门禁通行的的功能，该项目主要包含房屋管理、报修管理、访客管理、用户管理、通知管理等功能模块，技术栈以原生小程序技术为主配合了 Vant 组件库。</p> <h3 id="接口文档"><a href="#接口文档" class="header-anchor">#</a> 接口文档</h3> <p><a href="https://www.apifox.cn/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer">https://www.apifox.cn/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="扫码体验"><a href="#扫码体验" class="header-anchor">#</a> 扫码体验</h3> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676255307628-50a6bd45-65b6-4a0e-8459-4661787e66bf.png#averageHue=%23dfdfdf&amp;clientId=u591bae89-716d-4&amp;from=paste&amp;height=215&amp;id=ue2f181de&amp;name=image.png&amp;originHeight=430&amp;originWidth=430&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=67557&amp;status=done&amp;style=none&amp;taskId=ua192320a-f2b6-430f-b15e-190c7ad07be&amp;title=&amp;width=215" alt="image.png"></p> <h2 id="_02-拉取远程仓库代码"><a href="#_02-拉取远程仓库代码" class="header-anchor">#</a> 02.拉取远程仓库代码</h2> <h3 id="目标"><a href="#目标" class="header-anchor">#</a> 目标</h3> <p>掌握git克隆、设置远程仓库地址、修改分支名称等git命令。</p> <h3 id="趣味提问"><a href="#趣味提问" class="header-anchor">#</a> 趣味提问</h3> <p>新人去公司的第一天一般干啥？</p> <h3 id="拉取代码"><a href="#拉取代码" class="header-anchor">#</a> 拉取代码</h3> <p>享+社区小程序项目静态页面已经完成，我们的任务是联调接口处理业务逻辑，以下是代码仓库地址：</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># gitHub 仓库</span>
<span class="token function">git</span> clone <span class="token parameter variable">-b</span> template https://gitee.com/xujihao007/enjoy-plus
<span class="token comment"># 或 gitee 仓库</span>
<span class="token function">git</span> clone <span class="token parameter variable">-b</span> template https://gitee.com/xujihao007/enjoy-plus

<span class="token comment"># 修改分支名称</span>
<span class="token function">git</span> branch <span class="token parameter variable">-m</span> template main
</code></pre></div><p>:::success
通过 git clone 拉取代码时默认会克隆的仓库地址设置为我们的远程仓库地址，会导致同学们 push 代码时失败，如果在企业中的情况下，需要联系负责人将你添加为团队开发者获取权限。
:::
可通过如下git命令查看和修改远程仓库地址</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 查看远程仓库地址</span>
<span class="token function">git</span> remote <span class="token parameter variable">-v</span> 
<span class="token comment"># 修改远程仓库地址</span>
<span class="token function">git</span> remote set-url origin <span class="token string">'这里是你的远程仓库地址'</span> 
</code></pre></div><p>其它相关常用git命令</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 添加远程仓库地址</span>
<span class="token function">git</span> remote <span class="token function">add</span> origin <span class="token string">'这里是你的远程仓库地址'</span>
<span class="token comment"># 推送本地分支到远程</span>
<span class="token function">git</span> push origin main
<span class="token comment"># 推送本地分支到远程并建立关联</span>
<span class="token function">git</span> push <span class="token parameter variable">-u</span> origin main
</code></pre></div><p>:::success
<strong>注意:</strong><br>在企业中做开发时不需要也不允许把代码放到个人仓库下的，切记切记！！！
:::</p> <h3 id="小结"><a href="#小结" class="header-anchor">#</a> 小结</h3> <p>去公司第一天若发现自己git pull/git push时，提示没有权限应该怎么办？git pull或git push时提示没权限，应该是你还不是改项目的开发人员，需要找你的同事或组长帮你添加一下权限。</p> <h2 id="_03-启动项目"><a href="#_03-启动项目" class="header-anchor">#</a> 03.启动项目</h2> <h3 id="目标-2"><a href="#目标-2" class="header-anchor">#</a> 目标</h3> <p>掌握小程序项目启动方式。</p> <h3 id="思考"><a href="#思考" class="header-anchor">#</a> 思考</h3> <p>获取小程序项目代码后，如何把小程序项目跑起来？</p> <h3 id="核心步骤"><a href="#核心步骤" class="header-anchor">#</a> 核心步骤</h3> <ul><li>导入项目</li></ul> <p>打开开发者工具后选择“导入”，然后导入拉取下来的代码，还要把 AppID 更换成自己的。<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676258134834-8bff5e92-e68a-4929-9512-b0bb384402b0.png#averageHue=%23353534&amp;clientId=u591bae89-716d-4&amp;from=paste&amp;height=250&amp;id=u9358b554&amp;name=image.png&amp;originHeight=500&amp;originWidth=1584&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=159679&amp;status=done&amp;style=none&amp;taskId=u461b520c-013e-4353-99f3-814a73c90f7&amp;title=&amp;width=792" alt="image.png"></p> <ul><li>安装依赖</li></ul> <p>当前项目需要安装的依赖是 eslint 和 prettier 以及 Vant</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span>
</code></pre></div><ul><li>查看配置文件project.config.json</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
	<span class="token property">&quot;miniprogramRoot&quot;</span><span class="token operator">:</span> <span class="token string">&quot;miniprogram/&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;compileType&quot;</span><span class="token operator">:</span> <span class="token string">&quot;miniprogram&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;projectname&quot;</span><span class="token operator">:</span> <span class="token string">&quot;享+社区&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;setting&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;useCompilerPlugins&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token string">&quot;sass&quot;</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token property">&quot;packNpmManually&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;packNpmRelationList&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token property">&quot;packageJsonPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./package.json&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;miniprogramNpmDistDir&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./miniprogram&quot;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>miniprogramRoot 享+社区项目的根目录为 miniprogram</li> <li>setting.useCompilerPlugins 启用了 sass 支持</li> <li>packNpmRelationList 指定了npm构建时所需的package.json的位置以及构建后代码的生成位置</li> <li>构建npm</li></ul> <p><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676259896814-a70e128e-2d42-47d8-b015-2c73191a9ffa.png#averageHue=%23bac3d3&amp;clientId=u591bae89-716d-4&amp;from=paste&amp;height=427&amp;id=ucf673b3e&amp;name=image.png&amp;originHeight=854&amp;originWidth=544&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=286088&amp;status=done&amp;style=none&amp;taskId=ua2784c78-c47e-401b-b48b-78c92ede1c3&amp;title=&amp;width=272" alt="image.png"></p> <h3 id="用vscode写代码"><a href="#用vscode写代码" class="header-anchor">#</a> 用vscode写代码</h3> <p>VSCode 在编写代码方面比微信小程序更加方便，也更加符合大家的开发习惯，开发小程序时可以结合这两款工具，我们编写代码使用 VSCode，预览、调试、发布等使用小程序开发者工具。<br>在 VSCode 中无法原生支持 .wxml 文件的语法高亮及提示，需要安装一个插件: WXML - Language Service<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676267044012-8d5c3b33-96a4-4169-996a-de13b60a2c57.png#averageHue=%235f894f&amp;clientId=u591bae89-716d-4&amp;from=paste&amp;height=147&amp;id=u21a63cf9&amp;name=image.png&amp;originHeight=294&amp;originWidth=1910&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=198096&amp;status=done&amp;style=none&amp;taskId=ufac495b7-fbd5-4356-8c49-55ec9b0ebbd&amp;title=&amp;width=955" alt="image.png">
:::success
<strong>提示:</strong><br>完全使用小程序开发者工具是没有问题的，只是结合 VSCode 编写代码会更方便一些。
:::</p> <h2 id="_04-基础封装-消息提示"><a href="#_04-基础封装-消息提示" class="header-anchor">#</a> 04.基础封装—消息提示</h2> <h3 id="目标-3"><a href="#目标-3" class="header-anchor">#</a> 目标</h3> <p>掌握小程序中公共代码封装方式。</p> <h3 id="思考-2"><a href="#思考-2" class="header-anchor">#</a> 思考</h3> <p>开发过程中需要向用户反馈消息的场景有很多，如接口结果提示、表单验证提示等，我们每次调用wx.showToast({<br>title: 'xxx',<br>icon: 'none',<br>mask: true<br>})感觉有点麻烦，有什么办法能简化一下？</p> <h3 id="消息提示封装"><a href="#消息提示封装" class="header-anchor">#</a> 消息提示封装</h3> <p>新建 utils/utils.js 文件，然后在这里完成具体的封装逻辑：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> utils <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">/**
   * 封装wx.showToast
   * @param {string} title  消息提示内容
   */</span>
  <span class="token function">toast</span><span class="token punctuation">(</span>title <span class="token operator">=</span> <span class="token string">'数据加载失败...'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      title<span class="token punctuation">,</span>
      <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">mask</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token comment">// 导出模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> utils
</code></pre></div><h3 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 导入模块</span>
<span class="token keyword">import</span> utils <span class="token keyword">from</span> <span class="token string">'../../utils/utils'</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'页面onLoad触发'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="小结-2"><a href="#小结-2" class="header-anchor">#</a> 小结</h3> <p>开发中，如果发现有大量重复的代码，可以考虑加以封装。</p> <h2 id="_05-基础封装-全局加载"><a href="#_05-基础封装-全局加载" class="header-anchor">#</a> 05.基础封装—全局加载</h2> <h3 id="目标-4"><a href="#目标-4" class="header-anchor">#</a> 目标</h3> <p>掌握全局加载方式，进一步简化代码。</p> <h3 id="思考-3"><a href="#思考-3" class="header-anchor">#</a> 思考</h3> <p>在不同的页面调用utils下的toast时，每次都要在页面头部导入一下，还是很麻烦，能不能进一步优化下？</p> <h3 id="全局加载"><a href="#全局加载" class="header-anchor">#</a> 全局加载</h3> <p>小程序的api都是放到wx这个对象下的（如wx.request,wx.showToast)，我们能不能将我们的方法也挂载到wx上呢？</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> utils <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// ... 略</span>
<span class="token punctuation">}</span>
<span class="token comment">// 扩展 wx 全局对象，切记不要与原用 api 重名</span>
wx<span class="token punctuation">.</span>$utils <span class="token operator">=</span> utils
<span class="token comment">// 导出模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> utils
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 导入模块</span>
<span class="token keyword">import</span> <span class="token string">'./utils/utils'</span>
<span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">globalData</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'页面onLoad触发'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="小结-3"><a href="#小结-3" class="header-anchor">#</a> 小结</h3> <p>可以将一些高频使用的函数挂载到wx对象上，进一步简化代码。小程序一般就是挂载到wx对象上，Vue项目的话一般挂载到Vue的原型上。</p> <h2 id="_06-git操作"><a href="#_06-git操作" class="header-anchor">#</a> 06.git操作</h2> <h3 id="目标-5"><a href="#目标-5" class="header-anchor">#</a> 目标</h3> <p>掌握git的常见命令与流程。</p> <h3 id="git新建分支并提交"><a href="#git新建分支并提交" class="header-anchor">#</a> git新建分支并提交</h3> <p>在公司做开发时，新功能一般是从dev分支新切出一个分支来开发，开发完成后再合并回dev，并将dev分支推送远程。</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 创建分支</span>
<span class="token function">git</span> checkout <span class="token parameter variable">-b</span> feat-utils
<span class="token comment"># 查看当前被修改的文件</span>
<span class="token function">git</span> status
<span class="token comment"># 查看具体修改内容</span>
<span class="token function">git</span> <span class="token function">diff</span>
<span class="token comment"># 暂存文件</span>
<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
<span class="token comment"># 提交到本地</span>
<span class="token function">git</span> commit <span class="token parameter variable">-m</span> <span class="token string">'feat(utils): 封装工具方法'</span>
</code></pre></div><p>:::success
提示：代码在commit之前不属于任何分支，所以如果某次忘记了切分支来开发新功能，也可等开发完后再切一个分支来提交。
:::</p> <h3 id="小结-4"><a href="#小结-4" class="header-anchor">#</a> 小结</h3> <p>在提交代码之前，多用git status、git diff查看更改，有利于发现代码的问题。</p> <h2 id="_07-网络请求-wx-https"><a href="#_07-网络请求-wx-https" class="header-anchor">#</a> 07.网络请求—wx-https</h2> <h3 id="目标-6"><a href="#目标-6" class="header-anchor">#</a> 目标</h3> <p>掌握第三方请求库的使用。</p> <h3 id="wx-https"><a href="#wx-https" class="header-anchor">#</a> wx-https</h3> <p>wx.request是不支持Promise的，所以本项目推荐使用一个 npm 模块 wx-https。<br><strong>安装&amp;构建</strong></p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> wx-https
</code></pre></div><p>:::success
<strong>注意:</strong><br>安装完毕后还要记得必须要构建后才可以使用 npm 的模块。
:::
<strong>使用</strong></p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">import</span> http from <span class="token string">'wx-https'</span>
</code></pre></div><ul><li>http.baseURL 配置接口基础路径</li> <li>http.get 以 GET 方法发起请求</li> <li>http.post 以 POST 方法发起请求</li> <li>http.put 以 PUT 方法发起请求</li> <li>http.delete 以 DELETE 方法发起请求</li> <li>http.intercept 配置请求和响应拦截器</li> <li>http 本身做为函数调用也能用于发起网络请求</li></ul> <h3 id="小结-5"><a href="#小结-5" class="header-anchor">#</a> 小结</h3> <p>可以自行封装或使用第三方请求库解决wx.request不支持promise的问题，npm包下载后，在小程序里一定记得要构建才能使用。</p> <h2 id="_08-网络请求-全局挂载-http"><a href="#_08-网络请求-全局挂载-http" class="header-anchor">#</a> 08.网络请求—全局挂载$http</h2> <h3 id="目标-7"><a href="#目标-7" class="header-anchor">#</a> 目标</h3> <p>掌握给wx全局对象添加全局属性的方式。</p> <h3 id="核心步骤-2"><a href="#核心步骤-2" class="header-anchor">#</a> 核心步骤</h3> <ol><li>新建utils/request.js文件</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 导入请求模块</span>
<span class="token keyword">import</span> http <span class="token keyword">from</span> <span class="token string">'wx-https'</span>

<span class="token comment">// 挂载到全局空间wx上</span>
<span class="token comment">// 前面最好加号$，用以和原生的api做区分</span>
wx<span class="token punctuation">.</span>$http <span class="token operator">=</span> http

<span class="token comment">// 导出模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> http
</code></pre></div><ol start="2"><li>在app.js导入执行utils/request.js</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 导入模块，执行里面代码</span>
<span class="token keyword">import</span> <span class="token string">'./utils/utils'</span>
<span class="token keyword">import</span> <span class="token string">'./utils/request'</span>
<span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">globalData</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ol start="3"><li>在页面使用</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// wx.$utils.toast('页面onLoad触发')</span>
    wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'https://live-api.itheima.net/announcement'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="小结-6"><a href="#小结-6" class="header-anchor">#</a> 小结</h3> <p>可以将一些高频使用的函数挂载到wx对象上，进一步简化代码。小程序一般就是挂载到wx对象上，Vue项目的话一般挂载到Vue的原型上。</p> <h2 id="_09-网络请求-配置基地址及响应拦截器"><a href="#_09-网络请求-配置基地址及响应拦截器" class="header-anchor">#</a> 09.网络请求—配置基地址及响应拦截器</h2> <h3 id="目标-8"><a href="#目标-8" class="header-anchor">#</a> 目标</h3> <p>掌握wx-https的基地址及拦截器配置。</p> <h3 id="代码参考"><a href="#代码参考" class="header-anchor">#</a> 代码参考</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 导入请求模块</span>
<span class="token keyword">import</span> http <span class="token keyword">from</span> <span class="token string">'wx-https'</span>

<span class="token comment">// 配置基地址</span>
http<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">'https://live-api.itheima.net'</span>

<span class="token comment">// 响应拦截器配置</span>
http<span class="token punctuation">.</span>intercept<span class="token punctuation">.</span><span class="token function-variable function">response</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// console.log(res)</span>
  <span class="token keyword">return</span> res<span class="token punctuation">.</span>data
<span class="token punctuation">}</span>
<span class="token comment">// 挂载到全局空间wx上</span>
<span class="token comment">// 前面最好加号$，用以和原生的api做区分</span>
wx<span class="token punctuation">.</span>$http <span class="token operator">=</span> http

<span class="token comment">// 导出模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> http

</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/announcement'</span><span class="token punctuation">)</span>
    <span class="token comment">// console.log(res)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">list</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_10-公告管理-公告列表"><a href="#_10-公告管理-公告列表" class="header-anchor">#</a> 10.公告管理—公告列表</h2> <h3 id="目标-9"><a href="#目标-9" class="header-anchor">#</a> 目标</h3> <p>能独立完成公告列表的开发。</p> <h3 id="核心步骤-3"><a href="#核心步骤-3" class="header-anchor">#</a> 核心步骤</h3> <ol><li>根据UI图完成结构样式搭建（已完成）</li> <li>发请求获取真实数据</li> <li>套用真实数据完成渲染</li></ol> <h3 id="参考代码"><a href="#参考代码" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">notifyList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getNotifyList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getNotifyList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/announcement'</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">notifyList</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>scroll<span class="token operator">-</span>view style<span class="token operator">=</span><span class="token string">&quot;position: absolute; top: 0;&quot;</span> show<span class="token operator">-</span>scrollbar<span class="token operator">=</span><span class="token string">&quot;{{false}}&quot;</span> enhanced scroll<span class="token operator">-</span>y<span class="token operator">&gt;</span>
  <span class="token comment">// ...省略</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notices&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notices-head&quot;</span><span class="token operator">&gt;</span>社区<span class="token operator">&lt;</span>text<span class="token operator">&gt;</span>公告<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notices-body&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>navigator wx<span class="token operator">:</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;{{notifyList}}&quot;</span> <span class="token literal-property property">wx</span><span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;id&quot;</span> hover<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;none&quot;</span> url<span class="token operator">=</span><span class="token string">&quot;/pages/notify/index&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notice&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notice-title&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notice-brief&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>content<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notice-date&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>createdAt<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>navigator<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>scroll<span class="token operator">-</span>view<span class="token operator">&gt;</span>
</code></pre></div><h2 id="_11-公告管理-公告详情"><a href="#_11-公告管理-公告详情" class="header-anchor">#</a> 11.公告管理—公告详情</h2> <h3 id="目标-10"><a href="#目标-10" class="header-anchor">#</a> 目标</h3> <p>能独立完成公告详情开发。</p> <h3 id="核心步骤-4"><a href="#核心步骤-4" class="header-anchor">#</a> 核心步骤</h3> <ol><li>根据UI图完成结构样式搭建（已完成）</li> <li>发请求获取真实数据
<ol><li>传递及获取请求参数</li> <li>携带参数发送请求获取数据</li></ol></li> <li>套用真实数据完成渲染</li></ol> <h3 id="参考代码-2"><a href="#参考代码-2" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notices-body&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>navigator 
      <span class="token literal-property property">wx</span><span class="token operator">:</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;{{notifyList}}&quot;</span> 
      <span class="token literal-property property">wx</span><span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;id&quot;</span> hover<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;none&quot;</span> 
      url<span class="token operator">=</span><span class="token string">&quot;{{ '/pages/notify/index?id=' + item.id }}&quot;</span>
      <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notice&quot;</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">...</span>省略 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>navigator<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> id <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在onLoad里获取传递的参数，并传递给详情接口</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getNotifyDetail</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token keyword">async</span> <span class="token function">getNotifyDetail</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>id<span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'公告id不能为空'</span><span class="token punctuation">)</span>
    <span class="token comment">// 结构赋值，并给data一个别名</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> notifyDetail <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/announcement/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>notifyDetail<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>scroll<span class="token operator">-</span>view enhanced show<span class="token operator">-</span>scrollbar<span class="token operator">=</span><span class="token string">&quot;{{false}}&quot;</span> scroll<span class="token operator">-</span>y<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notify-meta&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;title&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;extra&quot;</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;author&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>creatorName<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;datetime&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span>createdAt<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;notify-content&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>rich<span class="token operator">-</span>text nodes<span class="token operator">=</span><span class="token string">&quot;{{content}}&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>rich<span class="token operator">-</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>scroll<span class="token operator">-</span>view<span class="token operator">&gt;</span>
</code></pre></div><h2 id="_12-用户管理-登录检测"><a href="#_12-用户管理-登录检测" class="header-anchor">#</a> 12.用户管理—登录检测</h2> <h3 id="目标-11"><a href="#目标-11" class="header-anchor">#</a> 目标</h3> <p>掌握全局检测用户登录状态方式。</p> <h3 id="思考-4"><a href="#思考-4" class="header-anchor">#</a> 思考</h3> <p>前端如何判断用户有没有登录？</p> <h3 id="检测方法"><a href="#检测方法" class="header-anchor">#</a> 检测方法</h3> <p>前端通过本地或内存存储的 token 来判断用户的登录状态。</p> <ol><li>通过本地存储api。wx.getStorage?Sync</li></ol> <p>优点：简单。<br>缺点：读取本地存储速度较慢。</p> <ol start="2"><li>将token存储到全局实例app中，然后判断app实例中是否有token。getApp()</li></ol> <p>优点：速度快。<br>缺点：实现复杂些。</p> <h3 id="将token放到app上"><a href="#将token放到app上" class="header-anchor">#</a> 将token放到app上</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 导入模块，执行里面代码</span>
<span class="token keyword">import</span> <span class="token string">'./utils/utils'</span>
<span class="token keyword">import</span> <span class="token string">'./utils/request'</span>
<span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">globalData</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 异步api实现</span>
    wx<span class="token punctuation">.</span><span class="token function">getStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'token'</span><span class="token punctuation">,</span>
      <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>token <span class="token operator">=</span> data
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 同步api实现</span>
    <span class="token comment">// this.token = wx.getStorageSync('token');</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="小结-7"><a href="#小结-7" class="header-anchor">#</a> 小结</h3> <p>一般我们会把需要在多个页面之间共享的数据放到全局实例app中。通过getApp()获取到全局实例，然后往实例上添加属性即可。</p> <h2 id="_13-用户管理-统一登录检测"><a href="#_13-用户管理-统一登录检测" class="header-anchor">#</a> 13.用户管理—统一登录检测</h2> <h3 id="目标-12"><a href="#目标-12" class="header-anchor">#</a> 目标</h3> <p>了解全局登录检测的实现方式。</p> <h3 id="思考-5"><a href="#思考-5" class="header-anchor">#</a> 思考</h3> <p>项目中那么多页面，每个页面里都要做登录判断，好麻烦，能优化吗？</p> <h3 id="统一登录检测"><a href="#统一登录检测" class="header-anchor">#</a> 统一登录检测</h3> <p>小程序中不支持路由拦截，需要开发者自行封装路由拦截的功能。通常有以下几种实现方式：</p> <ol><li>封装组件。用组件将每个需要登录的页面包起来，登录检测的逻辑统一放到组件内部实现。</li></ol> <p>将需要登录的页面都放置一个登录检测组件，登录检测组件里只放置一个插槽，该插槽只在用户登录时才显示，然后用该组件将页面所有内容全包裹起来，相当于将页面所有内容都放置于插槽中，这样用户未登录时将看不到页面的任何内容，用户登录与否可放到组件的attached生命周期钩子里做判断。</p> <ol start="2"><li>隐藏路由回调api。wx.onAppRoute。了解即可，这个api官方未发布，但是可以用，可能有被干掉的风险。</li> <li>重写路由api。自己添加路由守卫。</li> <li>添加响应拦截器。在拦截器中做统一处理。</li></ol> <h3 id="小结-8"><a href="#小结-8" class="header-anchor">#</a> 小结</h3> <p>页面较多时，一般都要做统一的登录检测，可以大大降低重复代码及提高代码可维护性。</p> <h2 id="_14-登录检测-组件封装"><a href="#_14-登录检测-组件封装" class="header-anchor">#</a> 14.登录检测-组件封装</h2> <h3 id="目标-13"><a href="#目标-13" class="header-anchor">#</a> 目标</h3> <p>掌握登录检测组件封装</p> <h3 id="核心步骤-5"><a href="#核心步骤-5" class="header-anchor">#</a> 核心步骤</h3> <ol><li>创建</li></ol> <p>新建components文件夹，在文件夹中新建authorization文件夹，然后右键选择新建组件。</p> <ol start="2"><li>注册</li></ol> <p>在app.json中全局注册。</p> <ol start="3"><li>使用</li></ol> <p>找一个需要登录的页面，用该组件将页面所有元素包裹起来。</p> <h3 id="参考代码-3"><a href="#参考代码-3" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>components<span class="token operator">/</span>authorization<span class="token operator">/</span>index<span class="token punctuation">.</span>wxml<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>slot wx<span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{isLogin}}&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>slot<span class="token operator">&gt;</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code> <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&quot;authorization&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/components/authorization/index&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>authorization<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>block wx<span class="token operator">:</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;{{true}}&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">...</span>省略
  <span class="token operator">&lt;</span><span class="token operator">/</span>block<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>view wx<span class="token operator">:</span><span class="token keyword">else</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;blank&quot;</span><span class="token operator">&gt;</span>
    您还没有认证房屋，请点击 <span class="token operator">&lt;</span>navigator hover<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;none&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;link&quot;</span> url<span class="token operator">=</span><span class="token string">&quot; &quot;</span><span class="token operator">&gt;</span>添加<span class="token operator">&lt;</span><span class="token operator">/</span>navigator<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>authorization<span class="token operator">&gt;</span>
</code></pre></div><h2 id="_15-登录检测-未登录跳转到登录页"><a href="#_15-登录检测-未登录跳转到登录页" class="header-anchor">#</a> 15.登录检测—未登录跳转到登录页</h2> <h3 id="目标-14"><a href="#目标-14" class="header-anchor">#</a> 目标</h3> <p>掌握自定义组件生命周期attached钩子的应用。</p> <h3 id="参考代码-4"><a href="#参考代码-4" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">isLogin</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">lifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在组件实例进入页面节点树时执行</span>
    <span class="token comment">// 这里不能用created钩子，因为created里面不能调用setData</span>
    <span class="token function">attached</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> isLogin <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        isLogin<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isLogin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/pages/login/index'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_16-登录检测-记录返回地址"><a href="#_16-登录检测-记录返回地址" class="header-anchor">#</a> 16.登录检测—记录返回地址</h2> <h3 id="目标-15"><a href="#目标-15" class="header-anchor">#</a> 目标</h3> <p>掌握getCurrentPages的应用。</p> <h3 id="思考-6"><a href="#思考-6" class="header-anchor">#</a> 思考</h3> <p>为了用户更好的体验，当用户跳转到A页面，发现用户未登录而重定向到登录页，用户登录后，应该要跳回A页面，这个该怎么实现呢？</p> <h3 id="核心步骤-6"><a href="#核心步骤-6" class="header-anchor">#</a> 核心步骤</h3> <p>在重定向到登录页之前，记录下当前页面的路径，将该路径作为参数传入登录页。</p> <h3 id="参考代码-5"><a href="#参考代码-5" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">/**
   * 组件的属性列表
   */</span>
  <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/**
   * 组件的初始数据
   */</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">isLogin</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">lifetimes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在组件实例进入页面节点树时执行</span>
    <span class="token comment">// 这里不能用created钩子，因为created里面不能调用setData</span>
    <span class="token function">attached</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> isLogin <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        isLogin<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isLogin<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> pages <span class="token operator">=</span> <span class="token function">getCurrentPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token comment">// console.log(pages)</span>
        <span class="token keyword">const</span> lastPage <span class="token operator">=</span> pages<span class="token punctuation">[</span>pages<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
        <span class="token comment">// 或 const lastPage = pages.pop()</span>
        <span class="token keyword">const</span> route <span class="token operator">=</span> lastPage<span class="token punctuation">.</span>route
        wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/pages/login/index?redirectUrl=/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">/**
   * 组件的方法列表
   */</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_17-登录-倒计时"><a href="#_17-登录-倒计时" class="header-anchor">#</a> 17.登录—倒计时</h2> <h3 id="目标-16"><a href="#目标-16" class="header-anchor">#</a> 目标</h3> <p>掌握vant倒计时组件的使用。</p> <h3 id="思考-7"><a href="#思考-7" class="header-anchor">#</a> 思考</h3> <p>如何实现以下效果<br><img src="https://cdn.nlark.com/yuque/0/2023/png/32808751/1676367801879-96c14800-5551-4de7-b439-c1ca5521cf24.png#averageHue=%23fafaf9&amp;clientId=u1854d9ad-2582-4&amp;from=paste&amp;height=43&amp;id=ubd0a18d4&amp;name=image.png&amp;originHeight=86&amp;originWidth=1236&amp;originalType=binary&amp;ratio=2&amp;rotation=0&amp;showTitle=false&amp;size=40369&amp;status=done&amp;style=none&amp;taskId=u341815dd-4c06-454b-a00c-760e9b87bc9&amp;title=&amp;width=618" alt="image.png"></p> <h3 id="van-field"><a href="#van-field" class="header-anchor">#</a> van-field</h3> <p>vant组件库中，输入框组件使用的是van-filed组件，只是双向绑定，插槽等特性。<br>文档：<a href="https://vant-contrib.gitee.io/vant-weapp/#/field" target="_blank" rel="noopener noreferrer">https://vant-contrib.gitee.io/vant-weapp/#/field<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="van-count-down"><a href="#van-count-down" class="header-anchor">#</a> van-count-down</h3> <p>vant组件库中，倒计时使用的是van-count-down组件。<br>文档：<a href="https://vant-contrib.gitee.io/vant-weapp/#/count-down" target="_blank" rel="noopener noreferrer">https://vant-contrib.gitee.io/vant-weapp/#/count-down<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_18-登录-获取验证码"><a href="#_18-登录-获取验证码" class="header-anchor">#</a> 18.登录—获取验证码</h2> <h3 id="目标-17"><a href="#目标-17" class="header-anchor">#</a> 目标</h3> <p>能独立完成获取验证码功能。</p> <h3 id="核心步骤-7"><a href="#核心步骤-7" class="header-anchor">#</a> 核心步骤</h3> <ol><li>获取表单数据。即获取用户填写的手机号码</li> <li>验证手机号码的格式</li> <li>请求接口，获取短信验证码</li></ol> <h3 id="参考代码-6"><a href="#参考代码-6" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>wxml：
<span class="token operator">&lt;</span>van<span class="token operator">-</span>field
  <span class="token literal-property property">model</span><span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">&quot;{{mobile}}&quot;</span>
  placeholder<span class="token operator">=</span><span class="token string">&quot;请输入手机号码&quot;</span>
  type<span class="token operator">=</span><span class="token string">&quot;number&quot;</span>
  use<span class="token operator">-</span>button<span class="token operator">-</span>slot
  placeholder<span class="token operator">-</span>style<span class="token operator">=</span><span class="token string">&quot;color: #979797&quot;</span>
<span class="token operator">&gt;</span>

js：
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 宽松验证规则</span>
    <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">1[3-9][0-9]{9}</span><span class="token regex-delimiter">/</span></span>
    <span class="token comment">// 正则验证</span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// 验证未通过</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写正确的手机号'</span><span class="token punctuation">)</span>
    <span class="token comment">// 返回验证结果</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 校验未通过，直接结束函数流程</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token comment">// 发送请求，获取验证码</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/code'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 请求失败，结束函数流程并给出提示</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 请求成功提示</span>
    wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'发送成功，请查收短信'</span><span class="token punctuation">)</span>
    <span class="token comment">// 开始倒计时</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 倒计时回调</span>
  <span class="token function">countDownChange</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">timeData</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">,</span>
      <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>minutes <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">||</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>seconds <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><p>:::success
注意：真实场景中，点击获取验证码后，是不会通过接口给你返回验证码的，太不安全了，而是直接给你手机发送短信。
:::</p> <h2 id="_19-登录-复制验证码到剪切板"><a href="#_19-登录-复制验证码到剪切板" class="header-anchor">#</a> 19.登录—复制验证码到剪切板</h2> <h3 id="目标-18"><a href="#目标-18" class="header-anchor">#</a> 目标</h3> <p>掌握小程序中设置、获取剪切板api的使用。</p> <h3 id="setclipboarddata"><a href="#setclipboarddata" class="header-anchor">#</a> setClipboardData</h3> <p>设置系统剪贴板的内容。调用成功后，会弹出 toast 提示&quot;内容已复制&quot;，持续 1.5s</p> <h3 id="getclipboarddata"><a href="#getclipboarddata" class="header-anchor">#</a> getClipboardData</h3> <p>获取系统剪贴板的内容<br>文档：<a href="https://developers.weixin.qq.com/miniprogram/dev/api/device/clipboard/wx.getClipboardData.html" target="_blank" rel="noopener noreferrer">https://developers.weixin.qq.com/miniprogram/dev/api/device/clipboard/wx.getClipboardData.html<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="参考代码-7"><a href="#参考代码-7" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>wxml：
<span class="token operator">&lt;</span>view bind<span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;copyCode&quot;</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;login-tips&quot;</span><span class="token operator">&gt;</span>未注册手机号经验证后将自动注册<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>

js
<span class="token comment">// 定义变量保存验证码</span>
<span class="token keyword">let</span> secret_code <span class="token operator">=</span> <span class="token string">''</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 宽松验证规则</span>
    <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">1[3-9][0-9]{9}</span><span class="token regex-delimiter">/</span></span>
    <span class="token comment">// 正则验证</span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// 验证未通过</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写正确的手机号'</span><span class="token punctuation">)</span>
    <span class="token comment">// 返回验证结果</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 校验未通过，直接结束函数流程</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token comment">// 发送请求，获取验证码</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/code'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 请求失败，结束函数流程并给出提示</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 请求成功提示</span>
    wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'发送成功，请查收短信'</span><span class="token punctuation">)</span>
    <span class="token comment">// 开始倒计时</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    secret_code <span class="token operator">=</span> data<span class="token punctuation">.</span>code
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 复制验证码到剪切板</span>
  <span class="token function">copyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">setClipboardData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">data</span><span class="token operator">:</span> secret_code<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 倒计时回调</span>
  <span class="token function">countDownChange</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">timeData</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">,</span>
      <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>minutes <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">||</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>seconds <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_20-登录-发送登录请求"><a href="#_20-登录-发送登录请求" class="header-anchor">#</a> 20.登录—发送登录请求</h2> <h3 id="目标-19"><a href="#目标-19" class="header-anchor">#</a> 目标</h3> <p>能独立完成登录请求功能。</p> <h3 id="核心步骤-8"><a href="#核心步骤-8" class="header-anchor">#</a> 核心步骤</h3> <ol><li>收集手机号、验证码。</li> <li>验证手机号、验证码。</li> <li>发送请求完成登录。</li></ol> <h3 id="参考代码-8"><a href="#参考代码-8" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>wxml：
<span class="token operator">&lt;</span>van<span class="token operator">-</span>field model<span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">&quot;{{code}}&quot;</span> placeholder<span class="token operator">=</span><span class="token string">&quot;请输入6位验证码&quot;</span> placeholder<span class="token operator">-</span>style<span class="token operator">=</span><span class="token string">&quot;color: #979797&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>view <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;toolbar&quot;</span> <span class="token literal-property property">bind</span><span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;submitForm&quot;</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;enjoy-icon icon-right&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span>text <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;button-text&quot;</span><span class="token operator">&gt;</span>登录<span class="token operator">&lt;</span><span class="token operator">/</span>text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>view<span class="token operator">&gt;</span>

js
<span class="token comment">// 定义变量保存验证码</span>
<span class="token keyword">let</span> secret_code <span class="token operator">=</span> <span class="token string">''</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token keyword">async</span> <span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 验证手机号验证码,未通过则介绍登录流程</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token comment">// 获取登录参数</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> mobile<span class="token punctuation">,</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data
    <span class="token comment">// 发送登录请求</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> mobile<span class="token punctuation">,</span> code <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 校验数据是否合法</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'登录失败，请检查手机号验证码'</span><span class="token punctuation">)</span>
    <span class="token comment">// 存储token</span>
    <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token
    wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">,</span> token<span class="token punctuation">)</span>
    <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token <span class="token operator">=</span> token
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">verifyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 正则验证是否为六个数字</span>
    <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\d{6}$</span><span class="token regex-delimiter">/</span></span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>code<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// 验证未通过</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请检查验证码是否正确'</span><span class="token punctuation">)</span>
    <span class="token comment">// 返回验证结果</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 宽松验证规则</span>
    <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">1[3-9][0-9]{9}</span><span class="token regex-delimiter">/</span></span>
    <span class="token comment">// 正则验证</span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// 验证未通过</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写正确的手机号'</span><span class="token punctuation">)</span>
    <span class="token comment">// 返回验证结果</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 校验未通过，直接结束函数流程</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token comment">// 发送请求，获取验证码</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/code'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 请求失败，结束函数流程并给出提示</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 请求成功提示</span>
    wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'发送成功，请查收短信'</span><span class="token punctuation">)</span>
    <span class="token comment">// 开始倒计时</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    secret_code <span class="token operator">=</span> data<span class="token punctuation">.</span>code
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 复制验证码到剪切板</span>
  <span class="token function">copyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">setClipboardData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">data</span><span class="token operator">:</span> secret_code<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 倒计时回调</span>
  <span class="token function">countDownChange</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">timeData</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">,</span>
      <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>minutes <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">||</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>seconds <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><h2 id="_21-登录成功-重定向回访问页面"><a href="#_21-登录成功-重定向回访问页面" class="header-anchor">#</a> 21.登录成功—重定向回访问页面</h2> <h3 id="目标-20"><a href="#目标-20" class="header-anchor">#</a> 目标</h3> <p>能独立完成重定回访问页功能。</p> <h3 id="重定向回访问页"><a href="#重定向回访问页" class="header-anchor">#</a> 重定向回访问页</h3> <p>登录成功后，体验比较好的做法是重定向回用户想要访问的页面。兜底做法是重定向到首页。</p> <h3 id="核心步骤-9"><a href="#核心步骤-9" class="header-anchor">#</a> 核心步骤</h3> <ol><li>跳转登录页是传递参数记录当前访问页的路由（已完成）</li> <li>onLoad钩子里接收参数并记录到页面data中</li> <li>请求成功后重定向回接收到的页面地址</li></ol> <h3 id="参考代码-9"><a href="#参考代码-9" class="header-anchor">#</a> 参考代码</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 定义变量保存验证码</span>
<span class="token keyword">let</span> secret_code <span class="token operator">=</span> <span class="token string">''</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> redirectUrl <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取重定向页面地址并记录</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span> redirectUrl <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token keyword">async</span> <span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 验证手机号验证码,未通过则介绍登录流程</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token comment">// 获取登录参数</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> mobile<span class="token punctuation">,</span> code <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data
    <span class="token comment">// 发送登录请求</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> mobile<span class="token punctuation">,</span> code <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 校验数据是否合法</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'登录失败，请检查手机号验证码'</span><span class="token punctuation">)</span>
    <span class="token comment">// 存储token</span>
    <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token
    wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">,</span> token<span class="token punctuation">)</span>
    <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>token <span class="token operator">=</span> token
    <span class="token comment">// 重定向回访问页, 如没有则回首页</span>
    wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>redirectUrl <span class="token operator">||</span> <span class="token string">'/pages/index/index'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">verifyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 正则验证是否为六个数字</span>
    <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\d{6}$</span><span class="token regex-delimiter">/</span></span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>code<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// 验证未通过</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请检查验证码是否正确'</span><span class="token punctuation">)</span>
    <span class="token comment">// 返回验证结果</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 宽松验证规则</span>
    <span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">1[3-9][0-9]{9}</span><span class="token regex-delimiter">/</span></span>
    <span class="token comment">// 正则验证</span>
    <span class="token keyword">const</span> valid <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// 验证未通过</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'请填写正确的手机号'</span><span class="token punctuation">)</span>
    <span class="token comment">// 返回验证结果</span>
    <span class="token keyword">return</span> valid
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token keyword">async</span> <span class="token function">getCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 校验未通过，直接结束函数流程</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">verifyMobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span>
    <span class="token comment">// 发送请求，获取验证码</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> code<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> wx<span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/code'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">mobile</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>mobile<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token comment">// 请求失败，结束函数流程并给出提示</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">10000</span><span class="token punctuation">)</span> <span class="token keyword">return</span> wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 请求成功提示</span>
    wx<span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'发送成功，请查收短信'</span><span class="token punctuation">)</span>
    <span class="token comment">// 开始倒计时</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    secret_code <span class="token operator">=</span> data<span class="token punctuation">.</span>code
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 复制验证码到剪切板</span>
  <span class="token function">copyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">setClipboardData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">data</span><span class="token operator">:</span> secret_code<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 倒计时回调</span>
  <span class="token function">countDownChange</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">timeData</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">,</span>
      <span class="token literal-property property">countDownVisible</span><span class="token operator">:</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>minutes <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">||</span> ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>seconds <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre></div><p>:::success
提示：最好加一个默认重定向地址，一般是首页。
:::</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/renzi_89/xcx/03.html" class="prev">
        day03-小程序基础
      </a></span> <span class="next"><a href="/renzi_89/xcx/05.html">
        day05-享+本地生活
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/renzi_89/assets/js/app.a378f438.js" defer></script><script src="/renzi_89/assets/js/3.2ef7cd9f.js" defer></script><script src="/renzi_89/assets/js/40.e28bfea0.js" defer></script>
  </body>
</html>
